<template><div class="container">
    <div class="row" v-for="a,rowIndex in row" :id="'y'+rowIndex">
        <div class="block" v-for="b,blockIndex in column" :id="'x'+blockIndex" @mousemove="onMouseMove(blockIndex, rowIndex)"></div>
    </div>
</div></template>

<script>
    class Snake {
        constructor(options) {
            this.options = options;
            this.snakeBody = [
                {
                    x: options.initPoint.x,
                    y: options.initPoint.y
                }
            ]
            
            this.onMove = null;
        }

        run() {
            setInterval(() => {
                
            }, this.options.moveSpeed);
        }
    }
    export default {
        name: 'Home',
        data() {
            return {
                map: [],
                row: 0, //行
                column: 0, //列
                snake: null,
            }
        },
        mounted() {
            this.row = parseInt(document.body.scrollHeight / 20);
            this.column = parseInt(document.body.scrollWidth / 20);
            console.log(this.row, this.column);

            this.snake = new Snake({
                initPoint: {
                    x: 50, 
                    y: 50
                },
                moveSpeed: '200',
                direction: "up"
            });
            this.snake.onMove = function () {

            }
            this.snake.run();
        },
        methods: {
            printPoint(x, y) {
                let ele = document.querySelectorAll("#y"+y+" > #x" +x)[0];
                ele.className = "block fill-point";
            },
            clearPoint(x, y) {
                let ele = document.querySelectorAll("#y"+y+" > #x" +x)[0];
                ele.className = "block";
            },
            onMouseMove(x, y) {
                this.printPoint(x, y);
            }
        }
    }

</script>
<style scoped>
    .container {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        border-left: 1px solid rgba(255, 255, 255, 0.1);
    }
    .row {
        height: 20px;
        width: 100%;
    }
    .block {
        height: 20px;
        width: 20px;
        box-sizing: border-box;
        border-right: 1px solid rgba(255, 255, 255, 0.1);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        float: left;
    }
    .fill-point {
        background-color: #d0d0d0;
    }
</style>